<template>
    <div>
        <div style="width: 100%;height: 90px;clear: both;"></div>
        <div class="asheng-bottom">
            <div v-if="menuType == 1" class="asheng-menu" style="color: #5C77F6;" @click="ashenglink(1)">
                <img src="/icon/home_blue.png" />
                <div>首页</div>
            </div>
            <div v-else class="asheng-menu" @click="ashenglink(1)">
                <img src="/icon/home_grey.png" />
                <div>首页</div>
            </div>

            <div v-if="menuType == 3" class="asheng-menu" style="color: #5C77F6;" @click="ashenglink(3)">
                <img src="/icon/problem_blue.png" />
                <div>常见问题</div>
            </div>
            <div v-else class="asheng-menu" @click="ashenglink(3)">
                <img src="/icon/problem_grey.png" />
                <div>常见问题</div>
            </div>

            <div v-if="menuType == 2" class="asheng-menu" style="color: #5C77F6;" @click="ashenglink(2)">
                <img src="/icon/custom_blue.png" />
                <div>人工客服</div>
            </div>
            <div v-else class="asheng-menu" @click="ashenglink(2)">
                <img src="/icon/custom_grey.png" />
                <div>人工客服</div>
            </div>
            <div class="asheng-bottom-beian">渝ICP备2023004785号-2 已申请软著和外观设计专利 仿冒必究</div>
        </div>


        <div class="asheng-comm-kf-popup" v-if="kfPopupShow">
            <div class="asheng-comm-kf-dlalog">
                <div class="asheng-ckd-content">
                    <div class="asheng-ckd-wxno">
                        微信号：<font id="asheng-comm-kf-wx-no-val">wx00001</font>
                    </div>
                    <div class="asheng-ckd-shibie">
                        长按识别下方二维码添加微信
                    </div>
                    <div class="asheng-ckd-qrcode-img">
                        <img src="'+qrcodeurl+'" id="asheng-ckd-qrcode-img" />
                    </div>
                    <div class="asheng-ckd-btn" id="asheng-ckd-btn">
                        <a href="weixin://">联系客服</a>
                        <a href="#">联系客服</a>
                    </div>
                </div>
                <div class="asheng-comm-kf-dlalog-close" @click="kfPopupShow = false">
                    <img id="asheng-ckdc-btn" src="/image/v2/close_white.png" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ButtomMenu",
    props: {
        menuType: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            kfPopupShow: false,
            id: ""
        }
    },
    created() {
        this.initPage()
    },
    methods: {
        initPage() {
            this.id = this.$route.query.id
        },
        ashenglink(t) {
            if (t == 1) {
                this.$router.push({ path: "/phone/index", query: { id: this.id } })
            } else if (t == 2) {
                this.kfPopupShow = true
            } else if (t == 3) {
                this.$router.push({ path: "/phone/problem", query: { id: this.id } })
            }

        }
    }
}

</script>
<style>
.asheng-bottom {
    width: 100%;
    height: 74px;
    position: fixed;
    z-index: 9999;
    left: 0px;
    bottom: 0px;
    background-color: white;
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px 0px 10px 5px #eee;
}

.asheng-bottom-beian {
    width: 100%;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: #007aff;
    clear: both;
    color: white;
    font-size: 12px;
}

.asheng-menu {
    text-align: center;
    width: 33.3%;
    float: left;
    color: #B7BDC9;
}

.asheng-menu img {
    margin-top: 8px;
    height: 22px;
    width: 22px;
    cursor: pointer;
}

.asheng-menu div {
    margin-top: 0px;
    height: 20px;
    font-size: 13px;
    cursor: pointer;
}
</style>